{extend name="layout/layout" /}

{block name="style"}
	<link rel="stylesheet" href="/assets/js/Huploadify/Huploadify.css">
	<style>

		.mui-input-group .mui-input-row{
			height: auto;
		}
		.submit-btn{
			height: 45px;
			line-height: 45px;
			position: fixed;
			bottom: 0;
			left: 0;
			width:100%;
			background: #e60012;
			color:#ffff;
			text-align: center;
		}

		.logo img{
			max-height: 40px;
		}

		.mui-input-row label{
			width: 20%;
		}

		.mui-input-row label~input{
			width: 80%;
		}

		.ad-img{
			position: relative;
		}

		.del-img{
			position: absolute;
			top: 0px; 
			right: 0px;
			background: rgba(0, 0, 0, 0.7);
			color: #fff;
			width: 20px;
			height: 20px;
			text-align: center;
			line-height: 20px;
			border-radius: 50%;
		}
	</style>
{/block}

{block name="main"}
	<div class="comment" v-cloak>
		<div class="mui-row mui-text-center img-list mui-hidden">
			<div class="mui-col-xs-4">
				<div id="up"></div>
			</div>
		</div>

		<form action="{:url('/api/order/comment')}" class="mui-input-group">
			<div class="mui-input-row">
				<label>名称</label>
				<input type="text" v-model="name" class="mui-input-clear" placeholder="请输入用户名">
			</div>
			<div class="mui-input-row">
				<label>图标</label>
				<div class="logo">
					<img :src="logo_img" class="img-responsive" @tap="uploadImg('logo')" alt="">
				</div>
			</div>

			<div class="mui-input-row">
				<label>广告</label>
				<div class="upload-img mui-row">
					<div class="mui-col-xs-2 ad-img" v-if="imgSrc.length > 0" v-for="(img, index) in imgSrc">
						<img :src="img" class="img-responsive"  alt="">
						<span class="del-img" @tap="delImg(index)">x</span>
					</div>
					<div class="mui-col-xs-2">
						<img src="/assets/mobile/images/upload_icon.png" @tap="uploadImg('ad')" class="img-responsive" alt="">
					</div>
				</div>
			</div>
			


		</form>

		<div class="submit-btn" @tap="submitComment()">保存设置</div>
	</div>
{/block}

{block name="navbar"}{/block}

{block name="script"}
	<script src="/assets/js/Huploadify/jquery.Huploadify.js"></script>
	<script>
		var detailVue = new Vue({
			el: '.comment',
			data: {
				logo_img: '/assets/mobile/images/upload_icon.png',
				imgSrc: [],
				img_index: '',
				name: '',
			},
			mounted: function(){
				this.getDetail();
			},
			methods:{
				//获取订单详情
                getDetail: function(){
					layer.open({
						type:2,
						shadeClose: false
					});

					var that = this;
					var url =  'usershop/getShopInfo';
					request(that, {'url': url, 'data': {}}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							if(res.data) {
								that.name = res.data.name;
								that.logo_img = res.data.logo_image ? res.data.logo_image: '/assets/mobile/images/upload_icon.png';
								that.imgSrc = res.data.imgSrc? res.data.imgSrc: [];
							}
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				//改变商品评分
				changeScore: function (goods, index){
					goods.score = index+1;
				},
				//提交评价
				submitComment: function(){
					var that = this;

					var data = {
						name: this.name,
						logo_image: this.logo_img,
						ad_images: this.imgSrc.toString(),
					}

					if(!data.name) {
						mui.alert('请输入店铺名称');return;
					}

					if(!data.logo_image) {
						mui.alert('请上传店铺LOGO');return;
					}

					if(!data.ad_images) {
						mui.alert('请上传广告图片');return;
					}
			

					request(that, {'url': 'usershop/setShopInfo', 'data': data}, function(res){
						if(res.code == 200) {
							mui.alert(res.msg, '提示', function(){
								mui.back();
							})
						} else {
							layer.closeAll();
							mui.toast(res.msg);
						}	
					});
					
				},
				//上传图片
				uploadImg: function(img_type) {
					this.img_type = img_type;
					if(img_type == 'ad' && this.imgSrc.length >= 3) {
					    mui.alert('最多上传3张');
					    return;
					}
					document.getElementById('file_upload_1-button').click();
				},
				//删除上传的图片
				delImg: function(index){
					this.imgSrc.splice(index, 1);
				}	
			}

		});

			//上传图片
    $('#up').Huploadify({
        auto:true,
        fileTypeExts:'*.jpg;*.png;*.jpeg;*.JPG;*.JPEG;*.PNG',
        multi:true,//能多图片上传
        formData:{ 'dirname':'applyInsure', 'name' : 'file'},
        fileSizeLimit:10240,//限制10M
        fileObjName : 'file',
        method:'post',
        buttonText :'<div class="upload-div"><img src="/assets/img/upload_img.png" class="upload-img" alt=""><p>上传图片</p></div>',
        showUploadedPercent:true,//是否实时显示上传的百分比，如20%
        showUploadedSize:true,
        removeTimeout:3,//进度条消失时间
        uploader:"{:url('/api/ajax/upload')}",
        onUploadStart:function(){
            //alert('开始上传');

        },
        onInit:function(){
            //alert('初始化');
        },
        //上传成功
        onUploadSuccess: function(file, data, response) {
            var res = JSON.parse(data);

            if(res.code == 200){
                var img_type = detailVue.img_type;
                if(img_type == 'logo') {
                	detailVue.logo_img = res.data.url;
                } else {
	            	detailVue.imgSrc.push(res.data.url);
                }
            }else{
            	mui.alert(res.msg);
            }
        },
        //删除图片
        onDelete:function(file){
            console.log('删除的文件：'+file);
            console.log(file);
        }
    });
	</script>
{/block}